<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打砖块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 500px;
            background-color: black;
        }

        .board {
            position: absolute;
            border-radius: 5px;
            background-color: white;
        }

        .ball {
            position: absolute;
            border-radius: 50%;
            background-color: red;
            left: 145px;
            bottom: 100px;
        }

        .brick {
            position: absolute;
            background-color: yellow;
            border: 1px solid green;
            box-sizing: border-box;
        }

        button {
            display: block;
            margin: 0 auto;
            width: 300px;
        }
    </style>
</head>

<body>

    <button>开始</button>
    <div class="container">

    </div>

</body>
<script>

    (function () {
        var paras = {
            boardWidth: 100,
            boardHeight: 10,
            boardBottom: 20,
            ballRadius: 5,
            brickWidth: 10,
            speedX: 1,
            speedY: -1,
        }
        var container = document.getElementsByClassName('container')[0];
        var board = document.createElement('div');
        var ball = document.createElement('div');
        var bricksInfo = { topMin: 4, topMax: 28, leftMin: 4, leftMax: 25, color: 'yellow' };
        var brickArr = [];
        var timer;


        init();

        function init() {
            initBricks();
            initBoard();
            initBall();
            var btn = document.getElementsByTagName('button')[0];
            btn.onclick = function () {
                if (btn.innerText.indexOf('开始') >= 0) {
                    run();
                    btn.innerText = "暂停";
                } else {
                    clearInterval(timer);
                    btn.innerText = "开始";
                }
            }
        }

        // 初始化砖块
        function initBricks() {
            for (var i = 0; i <= (bricksInfo.topMax); i++) {
                brickArr[i] = [];
                for (var j = 0; j <= bricksInfo.leftMax; j++) {
                    brickArr[i][j] = null;
                    if (i >= bricksInfo.topMin && j >= bricksInfo.leftMin && i <= bricksInfo.topMax && j <= bricksInfo.leftMax) {
                        var brick = document.createElement('div');
                        brick.className = 'brick';
                        brick.style.width = paras.brickWidth + 'px';
                        brick.style.height = paras.brickWidth + 'px';
                        brick.style.left = paras.brickWidth * j + 'px';
                        brick.style.top = paras.brickWidth * i + 'px';
                        container.appendChild(brick);
                        brickArr[i][j] = brick;

                    }
                }
            }
        }
        function initBoard() {
            board.className = 'board';
            board.style.width = paras.boardWidth + 'px';
            board.style.height = paras.boardHeight + 'px';
            board.style.bottom = paras.boardBottom + 'px';
            board.style.left = ((container.offsetWidth - paras.boardWidth) / 2) + 'px';
            container.appendChild(board);
            document.onmousedown = function (ev) {
                var lastX = ev.clientX;
                document.onmousemove = function (ev) {
                    var left = board.offsetLeft + ev.clientX - lastX;
                    left = left < 0 ? 0 : left;
                    left = left > container.offsetWidth - board.offsetWidth ? container.offsetWidth - board.offsetWidth : left;

                    board.style.left = left + 'px';
                    lastX = ev.clientX;
                }
                document.onmouseup = function (ev) {
                    document.onmousemove = null;
                }
            }
        }

        function initBall() {
            ball.className = 'ball';
            ball.style.width = paras.ballRadius * 2 + 'px';
            ball.style.height = paras.ballRadius * 2 + 'px';
            container.appendChild(ball);
        }

        function run() {
            timer = setInterval(function () {
                // 判断小球是否超出左右边框
                if (ball.offsetLeft <= 0 || ball.offsetLeft >= container.offsetWidth - ball.offsetWidth) {
                    paras.speedX *= -1;
                }
                // 判断小球是否超出上边框
                if (ball.offsetTop <= 0) {
                    paras.speedY *= -1;
                }
                // 判断小球是否超出下边框
                if (ball.offsetTop >= container.offsetHeight - ball.offsetHeight) {
                    //    游戏失败
                    paras.speedY *= -1;
                }
                // 判断小球是否落在托板的范围内
                if (ball.offsetTop >= board.offsetTop - ball.offsetHeight && ball.offsetLeft >= board.offsetLeft && ball.offsetLeft + ball.offsetWidth <= board.offsetLeft + board.offsetWidth && paras.speedY > 0) {
                    paras.speedY *= -1;
                }
                ball.style.left = (ball.offsetLeft + paras.speedX) + 'px';
                ball.style.top = (ball.offsetTop + paras.speedY) + 'px';
                // 检查是否与砖块碰撞，及碰撞角度
                checkBump();
            }, 1)
        }


        function checkBump() {

            // 判断小球的运动方向 0 右上 1 右下 2 左下 3 左上
            // 以小球最前面的角的坐标为参考点
            var direction = 0;
            if (paras.speedX > 0) {
                if (paras.speedY > 0) {
                    direction = 1;
                } else {
                    direction = 0;
                }
            } else {
                if (paras.speedY > 0) {
                    direction = 2;
                } else {
                    direction = 3;
                }
            }
            var brickIndexX,brickIndexY,ballX,ballY ;
            // 小球圆心作为参考点
            ballX =  ball.offsetTop + ball.offsetWidth /2 ;
            ballY =  ball.offsetLeft  + ball.offsetWidth /2  ;

            // switch (direction) {
            //     case 0:
            //         ballX = ball.offsetTop;
            //         ballY = ball.offsetLeft + ball.offsetWidth;
            //         break;
            //     case 1:
            //     ballX =  ball.offsetTop + ball.offsetHeight ;
            //     ballY =  ball.offsetLeft + ball.offsetWidth ;

            //         break;
            //     case 2:
            //     ballX =  ball.offsetTop + ball.offsetHeight ;
            //     ballY =  ball.offsetLeft ;
            //         break;
            //     case 3:
            //          ballX =  ball.offsetTop ;
            //          ballY =  ball.offsetLeft ;
            //         break;
            // }
            // 计算小球所在位置的砖块数组索引值
            brickIndexX = Math.floor(ballX / 10);
            brickIndexY = Math.floor(ballY / 10);


            //判断小球当前位置是否有砖块
            if (brickIndexX <= bricksInfo.topMax && brickIndexY <= bricksInfo.leftMax) {
                if (brickArr[brickIndexX][brickIndexY] != null) {
                    // 该位置有砖块则进行反弹，并移除砖块
                    // 判断小球撞击砖块的那条边
                    var x = ballX - brickIndexX * 10 - 5;
                    var y = ballY - brickIndexY * 10 - 5;
                    console.log(x,y);
                    if( x > 0){
                        if(y > 0){
                            // 撞击右下角
                            if(Math.abs(y) > Math.abs(x)){
                                paras.speedY *= -1;
                            }else{
                                paras.speedX *= -1;
                            }

                        }else{
                            // 撞击右上角
                            if(Math.abs(y) > Math.abs(x)){
                                paras.speedY *= -1;
                            }else{
                                paras.speedX *= -1;
                            }

                        }
                    }else{
                        if(y > 0){
                            // 撞击左下角
                            if(Math.abs(y) > Math.abs(x)){
                                paras.speedY *= -1;
                            }else{
                                paras.speedX *= -1;
                            }

                        }else{
                            // 撞击左上角
                            if(Math.abs(y) > Math.abs(x)){
                                paras.speedY *= -1;
                            }else{
                                paras.speedX *= -1;
                            }

                        }
                    }
                    container.removeChild(brickArr[brickIndexX][brickIndexY]);
                    brickArr[brickIndexX][brickIndexY] = null;
                }


            }

        }

    })();



</script>

</html>